<template>
  <div class="operationData">
			<div class="main">
				<div class="record">
					<ul>
						<li>
							<dl>
								<dt class="ic_1"></dt>
								<dd>昨日预计收益</dd>
							</dl>
							<p>{{loadAccountMoneyList.yester_income}}</p>
						</li>    
						<li>
							<dl>
								<dt class="ic_2"></dt>
								<dd>可提现收益</dd>
							</dl>
							<p>{{loadAccountMoneyList.avail_income}}</p>
							<a href="javascript:;" class="btn_ashy" @click="withdraw">提现</a>
						</li>
						<li>
							<dl>
								<dt class="ic_3"></dt>
								<dd>本月收益</dd>
							</dl>
							<p>{{loadAccountMoneyList.month_income}} </p>
						</li>
						<li>
							<dl>
								<dt class="ic_4"></dt>
								<dd>累计总收益</dd>
							</dl>
							<p>{{loadAccountMoneyList.total_income}}</p>
						</li>											
					</ul>
				</div>
				<div class="date">
          <div class="charts" style="position:relative;bottom:10px;">
            <template>
              <div class="chartTime" style="position:relative;left:60%;top:20px;z-index:888;">
                <el-date-picker
                v-on:input="change(value)"
                v-model="value"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            <el-button size="small" @click="exportOrder">导出</el-button>
            </div>
            </template>
            <div id="eChart" style='width:98%;height:550px;background:#999!important;padding-top:0px'>
            </div>
          </div>
        </div>
			</div>
  </div>
</template>
<script>
import commonJs from "@/common/js/common";
export default {
  name: "operationData",
  data() {
    return {
      value: [new Date(new Date() - 6 * 24 * 3600 * 1000), new Date()],
      loadAccountMoneyList: [],
      timeQuantum: "",
      startDate: "",
      endDate: "",
      predict: "",
      uv: "",
      curdate: ""
    };
  },
  mounted() {
    this.devId = localStorage.getItem("devId");
    this.token = localStorage.getItem("token");
    this.initData();
    this.loadAccountMoney();
    this.predictList();
  },
  methods: {
    initData() {
      this.startDate = commonJs.getTaskTime(
        new Date(new Date() - 6 * 24 * 3600 * 1000)
      );
      this.endDate = commonJs.getTaskTime(
        new Date(new Date() - 0 * 24 * 3600 * 1000)
      );
      // this.predictList();
    },
    loadAccountMoney() {
      this.$http({
        method: "POST",
        url: commonJs.BASE_URL + "/account/loadAccountMoney.do",
        data: `devId=${this.devId}&token=${this.token}`
      })
        .then(res => {
          if (res.data.code == 0) {
            this.loadAccountMoneyList = res.data.data;
          } else {
            this.$message({
              type: "warning",
              message: res.data.message
            });
          }
        })
        .catch(error => {
          this.$message({
            type: "warning",
            message: "网络错误，请稍后再试！"
          });
        });
    },
    //导出
    exportOrder() {
      window.location.href = encodeURI(
        encodeURI(
          commonJs.BASE_URL +
            "/predict/export.do?devId=" +
            this.devId +
            "&startDate=" +
            this.startDate +
            "&endDate=" +
            this.endDate +
            "&token=" +
            this.token
        )
      );
    },
    //走势图 初始化
    predictList() {
      this.$http({
        method: "POST",
        url: commonJs.BASE_URL + "/predict/list_7.do",
        data: `devId=${this.devId}&startDate=${this.startDate}&endDate=${
          this.endDate
        }&token=${this.token}`
      }).then(res => {
        if (res.data.code == 0) {
          let list_uv = [];
          let list_predict = [];
          let list_curdate = [];
          res.data.data.filter(o => {
            list_uv.push(o.uv);
            list_predict.push(o.predict);
            list_curdate.push(o.curdate.split(" ")[0]);
          });
          this.predict = list_predict;
          this.curdate = list_curdate;
          this.uv = list_uv;
          let eChart = this.$echarts.init(document.getElementById("eChart"));
          eChart.setOption({
            title: {
              text: "收益趋势图",
              left: 110
            },
            tooltip: {},
            legend: {
              data: ["uv", "预估收益"]
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: this.curdate
            },
            yAxis: [
              {
                type: "value",
                name: "uv",
                axisLabel: {
                  formatter: "{value}"
                }
              },
              {
                type: "value",
                name: "预估收益(元)",
                axisLabel: {
                  formatter: "{value}"
                }
              }
            ],
            series: [
              {
                name: "uv",
                type: "line",
                data: this.uv,
                smooth: true //这句就是让曲线变平滑的
              },
              {
                name: "预估收益",
                type: "line",
                yAxisIndex: 1,
                data: this.predict,
                smooth: true //这句就是让曲线变平滑的
              }
            ]
          });
        }
      });
    },
    change(value) {
      this.startDate = commonJs.getTaskTime(value[0]);
      this.endDate = commonJs.getTaskTime(value[1]);
      // js  日期减日期
      function dateDiff(d1, d2) {
        var day = 24 * 60 * 60 * 1000;
        try {
          var dateArr = d1.split("-");
          var checkDate = new Date();
          checkDate.setFullYear(dateArr[0], dateArr[1] - 1, dateArr[2]);
          var checkTime = checkDate.getTime();

          var dateArr2 = d2.split("-");
          var checkDate2 = new Date();
          checkDate2.setFullYear(dateArr2[0], dateArr2[1] - 1, dateArr2[2]);
          var checkTime2 = checkDate2.getTime();

          var cha = Math.abs((checkTime - checkTime2) / day) + 1;
          return cha;
        } catch (e) {
          return false;
        }
      }
      //时间段
      this.timeQuantum = dateDiff(
        commonJs.getTaskTime(value[1]),
        commonJs.getTaskTime(value[0])
      );
      // if (this.timeQuantum > 7) {
      //   this.$message({
      //     type: "warning",
      //     message: "日期选择请在7天范围内！"
      //   });
      //   // (this.value[0] = ""), (this.value[1] = "");
      // }
      this.predictList();
    },
    withdraw() {
      // if (this.loadAccountMoneyList.avail_income <= 0) {
      //   this.$message({
      //     type: "warning",
      //     message: "你的可提现金额为0！"
      //   });
      //   return;
      // }
      this.$router.push({
        path: "/accountMessage/withdrawal",
        query: { type: 2, account: 3 }
      });
      // this.$prompt("请输入提现金额", "提现", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   inputPattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
      //   inputErrorMessage: "提现金额格式不正确"
      // })
      //   .then(({ value }) => {
      //     if (value > this.loadAccountMoneyList.avail_income) {
      //       this.$message({
      //         type: "warning",
      //         message: "你的提现大于可提现金额！"
      //       });
      //       return;
      //     }
      //     this.$http({
      //       method: "POST",
      //       url: commonJs.BASE_URL + "/account/withdrawal.do",
      //       data: `devId=${this.devId}&token=${this.token}&applyMoney=${value}`
      //     }).then(res => {
      //       if (res.data.code == 0) {
      //         this.loadAccountMoney();
      //         this.$message({
      //           type: "success",
      //           message: res.data.message
      //         });
      //       } else {
      //         this.$message({
      //           type: "warning",
      //           message: res.data.message
      //         });
      //       }
      //     });
      //   })
      //   .catch(() => {
      //     this.$message({
      //     type: "info",
      //     message: "取消提现"
      //   });
      // });
    }
  }
};
</script>
<style>
.operationData {
  height: 100%;
}
.main {
  padding: 0;
  padding-right: 10px;
  margin: 12px;
  margin-right: 0;
  background: #fff;
  height: 100%;
  overflow: auto;
}
.record {
  height: 130px;
  display: -webkit-box;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  border-bottom: 12px solid #eee;
}
.record ul {
  background: #eee;
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: box;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-box-orient: horizontal;
  box-orient: horizontal;
  -webkit-box-align: stretch;
  -moz-box-align: stretch;
  -ms-box-align: stretch;
  box-align: stretch;
}
.record ul li {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-box-flex: 1;
  box-flex: 1;
  background: #fff;
  margin-right: 12px;
  height: 130px;
  position: relative;
}
.record ul li dl {
  position: relative;
  height: 40px;
  margin-top: 20px;
  margin-left: 30px;
}
.record ul li dt {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  background: url(/static/common/images/spp.png) no-repeat;
}
.record ul li dt.ic_1 {
  background-position: left -260px;
}
.record ul li dt.ic_2 {
  background-position: -38px -260px;
}
.record ul li dt.ic_3 {
  background-position: -76px -260px;
}
.record ul li dt.ic_4 {
  background-position: -114px -260px;
}
.record ul li dd {
  padding-left: 32px;
  font-size: 16px;
  color: #000;
}
.record ul li p {
  text-align: center;
  font-size: 30px;
  color: #fa8b00;
}
.record ul li a {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
a:link.btn_ashy,
a:visited.btn_ashy {
  width: 40px;
}
.main .date {
  width: 100%;
  height: calc(100% - 250px);
}
#myChart {
}
</style>
